<!-- 订单列表 -->
<template>
	<view class="list" v-show="list.length">
		<view class="list-item" v-for="(item, index) in list" :key="index">
			<view class="header">
				<text class="title">10亩农田找飞防团队作业洒药</text>
				<text class="price">价格:面议</text>
			</view>
			<view class="body">
				<view class="row">
					<text class="label">飞手经验:1-3年</text>
					<text class="label">最大起飞重量:1100g</text>
				</view>
				<text class="label">作业时间:2024-09-05</text>
			</view>
			<view class="footer border-top-1px">
				<button class="btn btn-transition-scale9">接单</button>
			</view>
		</view>
	</view>

	<!-- 暂无数据 -->
	<c-empty-data v-if="!list.length && !loadingState.default && !loadingState.default"></c-empty-data>
	<!-- loading -->
	<view style="margin-top: 20rpx;">
		<c-loading :loadingState="loadingState"></c-loading>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const params = ref({
		page: 1,
		limit: 10,
	});
	const list = ref([]);
	const total = ref(0);
	const loadingState = ref({
		default: false,
		loading: false,
		stop: false,
		pullup: false,
	});

	loadingState.value.default = true;
	setTimeout(() => {
		list.value = [{}, {}, {}, {}];
		loadingState.value.default = false;
	}, 2000);

	// 获取列表
	const getList = async () => {
		// 正在加载中并且不是第一页，或者已经加载完所有了
		if ((loadingState.value.default && params.value.page !== 1) || (loadingState.value.stop && params.value
				.page > 1)) return;
		loadingState.value.default = true;
		loadingState.value.pullup = false;
		loadingState.value.stop = false;

		const res = await api.order_api.getList(params.value);
		total.value = res.data.data.count;
		const list = res.data.data.list;

		if (params.value.page === 1) {
			list.vale = list;
		} else {
			list.vale.push(...list);
		}

		loadingState.value.default = false;
		if (list.vale.length < recordTotal) {
			loadingState.value.pullup = true;
		} else if (recordTotal === 0) {
			loadingState.value.stop = false;
		} else {
			loadingState.value.stop = true;
		}

		params.value.page += 1;
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 30rpx 25rpx;

		&-item {
			background-color: white;
			border-radius: 20rpx;

			&+.list-item {
				margin-top: 20rpx;
			}

		}
	}

	.header {
		display: flex;
		align-items: center;
		padding: 24rpx 22rpx 20rpx 36rpx;

		.title {
			flex-grow: 1;
			width: 0;
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.price {
			flex-shrink: 0;
			font-weight: bold;
			font-size: 30rpx;
			color: #FE3333;
			line-height: 1.5;
		}
	}

	.body {
		padding: 0 0 24rpx 36rpx;

		.row {
			padding-bottom: 12rpx;
		}

		.label {
			font-size: 28rpx;
			color: #999999;
			line-height: 1.5;

			&+.label {
				margin-left: 40rpx;
			}
		}
	}

	.footer {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 22rpx;

		.btn {
			width: 126rpx;
			height: 52rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 52rpx;
			background: linear-gradient(to right, #FE3333, #FF651E);
			border-radius: 26rpx;
		}
	}
</style>